<template>
  <Skeleton v-if="spinning" active />
  <div v-else>
    <a-row>
      <template v-if="diskInfo && diskInfo.length > 0">
        <a-col :span="6" v-for="(item, index) in diskInfo" :key="'diskInfo' + index">
          <gauge :data="item" />
        </a-col>
      </template>
    </a-row>
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, ref } from "vue"
  import { Skeleton } from "ant-design-vue"
  import { queryDiskInfo } from "./disk.api"
  import gauge from "./gauge.vue"

  const diskInfo = ref([])
  const spinning = ref(true)

  function loadRedisInfo() {
    queryDiskInfo()
      .then((res) => {
        for (let i = 0; i < res.length; i++) {
          // 当前算法算的是磁盘的已使用空间
          res[i].restPPT = 100 - parseInt(String((res[i].rest / res[i].max) * 100))
        }
        diskInfo.value = res
      })
      .finally(() => (spinning.value = false))
  }

  onMounted(() => {
    loadRedisInfo()
  })
</script>
